天亮了 昨晚是平安夜

關於迷霧森林故事

Rock you，Rock you，Rock you

敲家門沒人應沒的 Rocky
找不到先行離開招集會的父母
有點著急
沿著昨天父母帶著他前往會場的路回頭探索路上可能有的蛛絲馬跡
平常很少獨自出門的 Rocky 顯得有點緊張
約莫走了七分鐘 Rocky遇到一隻從來沒見過的巨鹿

圖片來源
於是 Rocky 鼓起勇氣與他對話
請...請問巨鹿先生，你昨晚到今天有看到我的父母嗎？
巨鹿搖搖頭，但看到 Rocky無助的樣子 又說
但我可以幫你找出他們的足跡
Rocky 興奮地表示：真的嗎？那太好了，謝謝巨鹿先生
還沒等到Rocky說完感謝的話
白天突然變成了黑夜
月光映著它發光的鹿角
就在此刻
天空中出現了一隻鹿

圖片來源
維持了三秒之後地上就出現了發光的腳印
當Rocky覺得充滿希望再抬頭想要表達感謝之意的時候
巨鹿突然消失在迷霧森林之中
山谷中響起了下面這一首音樂 聲音離浣熊越來越遠

待續..

動物園派對

緊接著我們還需要把vue.js導入
把 vue 透過 yarn 加入專案中

$ yarn add -D @vitejs/plugin-vue

若需要typescript或是next相關相依可以一起加

$ yarn add -D @vue/compiler-sfc
$ yarn add -D typescript
$ yarn add vue@next # vue3

再來我們必須在剛剛vite幫我們自動生成的檔案中加入vue的物件讓vite認識它

vite.config.ts

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue()
  ],
})

裝完之後就可以直接開始使用

$ bin/vite

Commands:
  vite build                       # Bundle all entrypoints using Vite.
  vite clobber                     # Clear the Vite cache, temp files, and builds
  vite dev                         # Start the Vite development server.
  vite install                     # Performs the initial configuration setup to get started with Vite Ruby.
  vite upgrade                     # Updates Vite Ruby related gems and npm packages.
  vite upgrade_packages            # Upgrades the npm packages to the recommended versions.
  vite version                     # Print version

在兩個專案目錄下的 command line 分頁再次打上

$ bin/vite dev

$ rails server

就可以看到專案跑起來的畫面
整合完vite跟vue之後
基於站在巨人的肩膀上寫文
我們先右轉來看看Vue架構的MVVM
Rails 與 Vue 的架構介紹

所以目前rails app的架構這樣：

├── app
│   ├── assets
│   ├── channels
│   ├── (C)ontrollers
│   ├── graphql
│   ├── helpers
│   ├── javascript  => 放前端檔案最重要的地方
│   ├── jobs
│   ├── mailers
│   ├── (M)odels
│   ├── services
│   └── (V)iews

其中前端檔案

├── javascript
│   ├── channels
│   │   ├── consumer.js
│   │   └── index.js
│   ├── entrypoints
│   │   ├── application.js
│   ├── src
│   │   ├── components
│   │   └── application.css
│   │   └── main.js
│   ├── app.vue

了解專案架構後 開工開工
接下來我們建立一個RoomsController

$ Rails g controller rooms

並在view端建立vue的

app/views/rooms/index.erb

<div id="app"></div>

在app/javascript/app.vue

<template>
  <p>{{ state.message }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    return {
      state: {
        message: "第13屆鐵人賽，動物園派對，趴踢趴踢歐奈，竟然撐過第五天了！"
      }
    }
  }
})
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

最後再導入這個vue檔案

app/javascript/entrypoints/application.js

import { createApp } from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
    createApp(App).mount('#app')
})

但這邊要注意的是
@Tingting 用的vue 是vue2
這邊用的是vue 3唷
差異可以看 全端大大 @Cian
的這篇

阿虎每日選幣

之前如果有守好的現在應該是空倉
先來看看剛上線的台灣創作者鱷魚NFT
畫風可愛程度不輸吸血鬼

天黑請閉眼